<template>
  <div class="mt-10">
    <div class="flex items-center text-2xl mb-2">
      <svg 
      v-show="!show"
      @mouseenter="show = true"
      t="1647493056679" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1989" width="32" height="32"><path d="M512 256a256 256 0 0 1 0 512 256 256 0 0 1 0-512z" fill="#3892F7" p-id="1990"></path><path d="M512 104.448C737.28 104.448 919.552 286.72 919.552 512S737.28 919.552 512 919.552 104.448 737.28 104.448 512 286.72 104.448 512 104.448z" fill="#3892F7" opacity=".302" p-id="1991"></path></svg>
      <el-button
        v-show="show"
        @mouseleave.native="show = false"
        @click="$emit('refresh')"
        icon="el-icon-refresh icon-rota"
        circle
      />
      <span class="ml-2 select-none">{{state==2? '报名中':state==3? '待开始':'...'}}</span>
    </div>
    <div v-show="!loading && cptts && cptts.length" class="gridbox">
      <el-card
      style="border-radius:0.5rem"
      v-for="cptt in cptts"
      :key="`cptt_${cptt.id}`"
      shadow="hover">
            <!-- :class="`bg-${state==2? 'green':'red'}-100`" -->
        <div class="cptt-type select-none z-10">
          <div class="hw-box z-20 rounded-full"
            style="border: 10px double #fafa;
            padding:calc(50% - 10px) 0"
          >
            <span class="p-1 transform -translate-y-2/4 block rotate-45">
            {{CodeToType[cptt.type]}}赛
            </span>
          </div>
        </div>
        
        <div class="hw-box">
          <img class="cptt-img hw-content"
          :src="cptt.url" v-lazy="cptt.url">
        </div>
        
        <div class="content">
          <p 
            class="font-bold cptt-name"
            @click="$router.push({name:'eventdetails',params:{id:cptt.id}})"
          >{{cptt.name}}</p>
          <van-count-down
            class="cptt-time select-none"
            :time="new Date(state == 2?cptt.overtime:cptt.goingtime) - new Date()"
          >
            <template #default="timeData">
              <span><i class="el-icon-time" />倒计时 </span>
              <template v-if="timeData.days">
                <span class="r-bolck opacity-80">{{timeData.days}}</span>
                <span class="t-colon">天</span>
              </template>
              <template v-else>
                <span class="t-block opacity-80">{{ timeData.hours<10? '0'+timeData.hours:timeData.hours }}</span>
                <span class="t-colon">时</span>
                <span class="t-block opacity-80">{{ timeData.minutes<10? '0'+timeData.minutes:timeData.minutes }}</span>
                <span class="t-colon">分</span>
                <span class="t-block opacity-80">{{ timeData.seconds<10? '0'+timeData.seconds:timeData.seconds }}</span>
                <span class="t-colon">秒</span>
              </template>
            </template>
          </van-count-down>
          <p class="cptt-info" v-html="cptt.info"/>
        </div>
      </el-card>
    </div>
    <div v-show="loading"
      v-loading="loading"
      class="h-52 border-2 border-dashed bg-clip-padding bg-gray-200"
    />
  </div>
</template>

<script>
import { CodeToType } from '@/conf'
export default {
  props:['cptts','state','loading'],
  data(){
    return{
      CodeToType:Object.freeze(CodeToType),
      show:false,
    }
  },
  computed:{
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-loading-mask{
  z-index: auto;
}
.gridbox{
  display: grid;
  grid-gap: 0.5rem;
  justify-content: space-around;
  // grid-template-columns: repeat(auto-fill,200px);
  grid-template-rows: repeat(2,1fr);
  .el-card{
    // cursor: pointer;
  }
  ::v-deep .el-card__body{
    position:relative !important;
  }
  & > div:nth-child(1){
    grid-row: span 2/span 2;
    grid-column: span 2 / span 2;
    .cptt-name{
      font-size: 24px;
    }
    .cptt-time,.cptt-info{
      font-size: 18px;
    }
    .cptt-type{
      font-size: 24px;
    }
  }
  & > div:not(:nth-child(1)){
    grid-row: span 1 / span 1;
    grid-column: span 1 / span 1;
  }
  .r-bolck{
    display: inline-block;
    margin-right: 5px;
    color: #fff;
    padding: 2px;
    text-align: center;
    background-color: #1989fa;
    border-radius: 2px;
  }
  .t-block{
    display: inline-block;
    margin-right: 5px;
    color: #fff;
    padding: 2px;
    text-align: center;
    background-color: #ee0a24;
    border-radius: 2px;
    
  }
  .t-colon{
    color: #000;
  }
  .cptt{
    &-name{
      cursor: pointer;
      color:#000;
      transition: all 1s;
      font-size: 18px;
      &:hover{
        color: #3892f7;
      }
    }
    &-time,&-info{
      font-size: 16px;
      color:#9499A0;
    }
    &-type{
      position: absolute;
      color:#faf;
      top:0px;
      right:00px;
      font-size: 0.75rem;
    }
    // &-img
    &-img{
      object-fit: cover;
      user-select:none;
      clip-path: polygon(0 10%, 100% 10%, 100% 90%, 0 90%);
      -webkit-clip-path:polygon(0 10%, 100% 10%, 100% 90%, 0 90%);
    }
  }
  .content{
    p{
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

@media (max-width: 1100px){
  .gridbox {
    grid-column: span 4;
    grid-template-columns: repeat(4,1fr);
    >*:nth-of-type(1n + 6){
      display: none;
    }
  }
}
@media (min-width: 1100px) and (max-width: 1400px){
  .gridbox{
    grid-template-columns: repeat(5,1fr);
    >*:nth-of-type(1n + 8){
      display: none;
    }
  }
}
@media (min-width: 1400px) and (max-width: 1700px){
  .gridbox{
    grid-template-columns: repeat(6,1fr);
    >*:nth-of-type(1n + 10){
      display: none;
    }
  }
}
@media (min-width: 1700px){
  .gridbox{
    grid-template-columns: repeat(7,1fr);
  }
}
// @media (min-width: 2000px){
//   .gridbox{
//     grid-template-columns: repeat(auto-fill,300px);
//   }
// }
</style>